<script lang="ts">
import {
    defineComponent,
    ref,
    watch,
    computed,
    reactive,
    onMounted,
} from "vue";
import { UserModule } from "@/store/modules/user";
import { showToast, showDialog, showConfirmDialog } from "vant";
import {
    getParameter,
    getStakeParameter,
    insertPreStake,
    updatePreStake,
    getStakeList,
    updateStake,
    send,
    getStakeInfo,
} from "@/api/nodeapi";
import { useI18n } from "vue-i18n";
import { FormatDate } from "@/utils/formatDate";
import { Stake_CONTRACT } from "@/contract";

export default defineComponent({
    setup() {
        const { t } = useI18n();
        const referrer = ref();
        const sendListRef = ref();
        const sendListRef2 = ref();
        const active = ref();
        const open = ref(false);
        const loading = ref(false);
        const pageLoading = ref(true);
        const stakeParameter = ref([]);
        const rentParameter = ref({});
        const balance = ref(0);
        const stakeItem = ref({});
        const amount = ref();
        const renewal = ref(0);
        const checked = ref(false);
        const stakeInfo = ref({});

        const setat = reactive({
            pageNum: 0,
            pageSize: 10,
        });
        const refreshing = ref(false);
        const loadingR = ref(true);
        const finished = ref(false);
        const list: any = ref([]);
        const onRefresh = () => {
            setat.pageNum = 0;
            finished.value = false;
            loadingR.value = true;
            refreshing.value = true;
            onLoad();
        };
        const onLoad = async () => {
            const res = await getStakeList(setat);
            if (refreshing.value) {
                list.value = [];
                refreshing.value = false;
            }
            list.value = list.value.concat(res.data.data.StakeList || []);
            // list.value = [
            //     {
            //         Duration: 30,
            //         Status: 0,
            //         Rate: 1,
            //         RewardEhbAvailable: 1,
            //         RewardEhbWithdrawn: 1,
            //         StakeTime: "2025-08-07 06:32:03",
            //         Amount: 100,
            //         RewardEhbAvailable: 1,
            //         Renewal: 60,
            //     },
            //     {
            //         Duration: 60,
            //         Status: 1,
            //         Rate: 1,
            //         RewardEhbAvailable: 1,
            //         RewardEhbWithdrawn: 1,
            //         StakeTime: "2025-08-07 06:32:03",
            //         Amount: 100,
            //         RewardEhbAvailable: 1,
            //         Renewal: 30,
            //     },
            //     {
            //         Duration: 30,
            //         Status: 1,
            //         Rate: 1,
            //         RewardEhbAvailable: 1,
            //         RewardEhbWithdrawn: 1,
            //         StakeTime: 1750856968895,
            //         Amount: 100,
            //         RewardEhbAvailable: 1,
            //         Renewal: 0,
            //     },
            // ];
            loadingR.value = false;
            setat.pageNum++;
            if (list.value.length >= res.data.data.Total) {
                finished.value = true;
            }
        };
        const changeTabs = () => {
            if (active.value == 1) {
                onRefresh();
            }
            if (active.value == 2) {
                sendListRef.value?.onRefresh();
            }
            if (active.value == 3) {
                sendListRef2.value?.onRefresh();
            }
        };
        const loadData = async () => {
            try {
                getParameter().then((res) => {
                    rentParameter.value = res.data.data.RentParameter;
                });
                getStakeInfo().then((res) => {
                    stakeInfo.value = res.data.data;
                });
                await tronWeb.trx
                    .getBalance(UserModule.userAddr)
                    .then((res) => {
                        balance.value = res;
                    });
                pageLoading.value = false;
            } catch (error) {}
        };
        onMounted(() => {
            getStakeParameter().then((res) => {
                stakeParameter.value = res.data.data.StakeParameter;
            });
        });
        const sendUpdateStake = async (item) => {
            showConfirmDialog({
                title: t("layout.CancelAutomaticRenewal"),
                beforeClose: async function (action: string): Promise<boolean> {
                    if (action === "confirm") {
                        try {
                            const res = await updateStake({
                                stakeId: item.Id,
                                renewal: 0,
                            });
                            if (res.data.code == 20) {
                                showDialog({ title: `${t("layout.success")}` });
                            } else {
                                showToast(res.data.message);
                            }
                            onRefresh();
                        } catch (params: any) {}
                        return false;
                    } else {
                        return true;
                    }
                },
            }).catch(() => {});
        };
        const sendUpdateStake2 = async (item) => {
            showConfirmDialog({
                title: t("layout.AutomaticRenewal"),
                beforeClose: async function (action: string): Promise<boolean> {
                    if (action === "confirm") {
                        try {
                            const res = await updateStake({
                                stakeId: item.Id,
                                renewal: item.renewal || item.Renewal,
                            });
                            if (res.data.code == 20) {
                                showDialog({ title: `${t("layout.success")}` });
                            } else {
                                showToast(res.data.message);
                            }
                            onRefresh();
                        } catch (params: any) {}
                        return false;
                    } else {
                        return true;
                    }
                },
            }).catch(() => {});
        };
        const clickUpdateStake = (item) => {
            if (!item.Renewal) {
                if (!item.renewal) {
                    item.renewal = stakeParameter.value[0].StakeDay;
                }
                sendUpdateStake2(item);
            } else {
                sendUpdateStake(item);
            }
        };
        const sendSend = async (item) => {
            showConfirmDialog({
                title: t("layout.WithdrawPrincipal"),
                beforeClose: async function (action: string): Promise<boolean> {
                    if (action === "confirm") {
                        try {
                            const res = await send({
                                stakeId: item.Id,
                            });
                            if (res.data.code == 20) {
                                showDialog({ title: `${t("layout.success")}` });
                            } else {
                                showToast(res.data.message);
                            }
                            onRefresh();
                            loadData();
                        } catch (params: any) {}
                        return false;
                    } else {
                        return true;
                    }
                },
            }).catch(() => {});
        };
        const sendSend2 = async () => {
            showConfirmDialog({
                title: t("layout.Receive"),
                beforeClose: async function (action: string): Promise<boolean> {
                    if (action === "confirm") {
                        try {
                            const res = await send({
                                stakeId: 0,
                            });
                            if (res.data.code == 20) {
                                showDialog({ title: `${t("layout.success")}` });
                            } else {
                                showToast(res.data.message);
                            }
                            loadData();
                        } catch (params: any) {}
                        return false;
                    } else {
                        return true;
                    }
                },
            }).catch(() => {});
        };
        const onSubmit = async () => {
            loading.value = true;
            var preStakeId;
            try {
                await referrer.value.loadVerifyToken(true);
                if (
                    Number(amount.value) > Number(fromSun.value(balance.value))
                ) {
                    showToast({
                        message: t("layout.InsufficientBalance"),
                        icon: "clear",
                        className: "_showToast2",
                        position: "top",
                    });
                    loading.value = false;
                    return;
                }
                var parameters = [];
                var options2 = {
                    callValue: Number(toSun.value(amount.value)),
                };
                const Createtransaction =
                    await tronWeb.transactionBuilder.triggerSmartContract(
                        tronWeb.address.toHex(Stake_CONTRACT),
                        "deposit()",
                        options2,
                        parameters,
                        tronWeb.address.toHex(UserModule.userAddr)
                    );
                const insertPreStakeRes = await insertPreStake({
                    amount: amount.value,
                    duration: stakeItem.value.StakeDay,
                    renewal: checked.value ? renewal.value : 0,
                    tx_hash: Createtransaction.transaction.txID,
                    tx_timestamp: parseInt(
                        Createtransaction.transaction.raw_data.timestamp / 1000
                    ),
                    tx_expiration: parseInt(
                        Createtransaction.transaction.raw_data.expiration / 1000
                    ),
                });
                console.log(insertPreStakeRes);
                if (insertPreStakeRes.data.code == 20) {
                    preStakeId = insertPreStakeRes.data.data.PreStakeId;
                    const transaction =
                        await tronWeb.transactionBuilder.addUpdateData(
                            Createtransaction.transaction
                        );
                    const signedTransaction = await tronWeb.trx.sign(
                        transaction
                    );
                    const broadcast =
                        await await tronWeb.trx.sendRawTransaction(
                            signedTransaction
                        );
                    if (broadcast.result) {
                        updatePreStake({
                            preStakeId: preStakeId,
                            status: 2,
                        });
                        open.value = false;
                        loadData();
                        showToast({
                            message: t("layout.SuccessfulTransaction"),
                            icon: "checked",
                            className: "_showToast",
                            position: "top",
                        });
                    } else {
                        switch (broadcast.code) {
                            case "TRANSACTION_EXPIRATION_ERROR":
                                updatePreStake({
                                    preStakeId: preStakeId,
                                    status: 1,
                                });
                                showToast({
                                    message: t("layout.TransactionExpiration"),
                                    icon: "clear",
                                    className: "_showToast2",
                                    position: "top",
                                });
                                break;
                            case "CONTRACT_VALIDATE_ERROR":
                                updatePreStake({
                                    preStakeId: preStakeId,
                                    status: 1,
                                });
                                showToast({
                                    message: t("layout.InsufficientBalance"),
                                    icon: "clear",
                                    className: "_showToast2",
                                    position: "top",
                                });
                                break;

                            default:
                                showToast({
                                    message: t(
                                        "layout.TheOrderWasNotPlacedSuccessfullyPleaseTryAgain"
                                    ),
                                    icon: "clear",
                                    className: "_showToast2",
                                    position: "top",
                                });
                                break;
                        }
                    }
                } else {
                    showToast({
                        message: t(
                            "layout.TheOrderWasNotPlacedSuccessfullyPleaseTryAgain"
                        ),
                        icon: "clear",
                        className: "_showToast2",
                        position: "top",
                    });
                }
            } catch (error) {
                console.log(error);
                if (preStakeId) {
                    updatePreStake({
                        preStakeId: preStakeId,
                        status: 1,
                    });
                    showToast({
                        message: t("layout.TransactionCancelled"),
                        icon: "clear",
                        className: "_showToast2",
                        position: "top",
                    });
                } else {
                    showToast({
                        message: t(
                            "layout.TheOrderWasNotPlacedSuccessfullyPleaseTryAgain"
                        ),
                        icon: "clear",
                        className: "_showToast2",
                        position: "top",
                    });
                }
            }
            loading.value = false;
        };
        const validatorMessage1 = (val) => {
            if (
                Number(val) < stakeItem.value.MinStake ||
                Number(val) > stakeItem.value.MaxStake
            ) {
                return false;
            } else {
                return true;
            }
        };
        const fromSun = computed(() => {
            return (data) => {
                return tronWeb.fromSun(data);
            };
        });
        const toSun = computed(() => {
            return (data) => {
                return tronWeb.toSun(data);
            };
        });

        const timeF = computed(() => {
            return (day) => {
                const timestamp = new Date().getTime() + day * 86400000;
                return FormatDate(new Date(timestamp), "yyyy-MM-dd hh:mm:ss");
            };
        });

        const timeF2 = computed(() => {
            return (item) => {
                const timestamp =
                    new Date(item.StakeTime).getTime() +
                    item.Duration * 86400000;
                return FormatDate(new Date(timestamp), "yyyy-MM-dd hh:mm:ss");
            };
        });

        const timeEnd = computed(() => {
            return (item) => {
                const endTimestamp =
                    new Date(item.StakeTime).getTime() +
                    item.Duration * 86400000;
                const timestamp = new Date().getTime();
                const day = Math.floor((endTimestamp - timestamp) / 86400000);
                return day >= 0 ? day : 0;
            };
        });

        watch(
            () => UserModule.userAddr,
            (newUserAddr: string) => {
                if (newUserAddr) {
                    loadData();
                }
            },
            { immediate: true }
        );
        return {
            referrer,
            sendListRef,
            sendListRef2,
            loading,
            pageLoading,
            active,
            stakeParameter,
            stakeInfo,
            stakeItem,
            balance,
            open,
            amount,
            checked,
            renewal,
            fromSun,
            toSun,
            list,
            setat,
            refreshing,
            loadingR,
            finished,
            onRefresh,
            onLoad,
            validatorMessage1,
            onSubmit,
            sendUpdateStake,
            sendUpdateStake2,
            sendSend,
            sendSend2,
            changeTabs,
            clickUpdateStake,
            timeF,
            timeF2,
            timeEnd,
        };
    },
});
</script>

<template>
    <div class="main2">
        <div class="page">
            <div class="incomeInfo">
                <div class="row">
                    <div class="cell">
                        <div class="label">
                            {{ $t("layout.Totalholdings") }}(TRX)
                        </div>
                        <div class="value">{{ stakeInfo.SumAmount || 0 }}</div>
                    </div>
                    <div class="cell">
                        <div class="label">{{ $t("layout.income") }}(TRX)</div>
                        <div class="value">
                            {{ stakeInfo.RewardTRX || 0 }}
                        </div>
                    </div>
                    <div class="cell">
                        <div class="label">{{ $t("layout.income") }}(TBK)</div>
                        <div class="value">
                            {{ stakeInfo.RewardTBK || 0 }}
                        </div>
                        <!-- <van-button
                            round
                            block
                            type="primary"
                            :disabled="!Number(stakeInfo.RewardTBK)"
                            :loading="loading"
                            @click="sendSend2"
                        >
                            {{ $t("layout.Receive") }}
                        </van-button> -->
                    </div>
                </div>
            </div>
            <van-tabs
                v-model:active="active"
                shrink
                @change="changeTabs"
                color="#EB0029"
            >
                <van-tab :title="$t('layout.Projectlist')">
                    <div class="itemList">
                        <ul>
                            <li
                                v-for="(item, index) in stakeParameter"
                                :key="index"
                            >
                                <div class="title">
                                    TRX
                                    <div class="right">
                                        {{
                                            $t("layout.Annualizedrateofreturn")
                                        }}
                                        <div class="value">
                                            {{ item.Rate / 10 }}%
                                        </div>
                                    </div>
                                </div>
                                <div class="StakeDay">
                                    {{ item.StakeDay }} {{ $t("layout.Days") }}
                                </div>
                                <div class="cell">
                                    <div class="label">
                                        {{ $t("layout.Depositamount") }}
                                    </div>
                                    <div class="value">
                                        {{ item.MinStake }}-{{ item.MaxStake }}
                                    </div>
                                </div>
                                <van-button
                                    round
                                    block
                                    type="primary"
                                    @click="(stakeItem = item), (open = true)"
                                    :disabled="pageLoading"
                                >
                                    {{ $t("layout.Deposit") }}
                                </van-button>
                            </li>
                        </ul>
                    </div>
                </van-tab>
                <van-tab :title="$t('layout.Myholdings')">
                    <div class="stakeList">
                        <van-pull-refresh
                            v-model="refreshing"
                            @refresh="onRefresh"
                        >
                            <list-finished
                                v-if="!loadingR && list.length == 0"
                            />
                            <van-list
                                v-model:loading="loadingR"
                                :finished="finished"
                                @load="onLoad"
                            >
                                <div
                                    class="stakeItem"
                                    v-for="(item, index) in list"
                                    :key="index"
                                >
                                    <div class="title">
                                        TRX
                                        <div class="right">
                                            {{ item.Duration
                                            }}{{ $t("layout.Days")
                                            }}{{
                                                $t(
                                                    [
                                                        "layout.Income",
                                                        "layout.Expired",
                                                        "layout.Redeemed",
                                                    ][item.Status]
                                                )
                                            }}
                                        </div>
                                    </div>
                                    <div class="totalRow">
                                        <div class="cell">
                                            <div class="label">
                                                {{ $t("layout.Fixed") }}APR
                                            </div>
                                            <div class="value">
                                                {{ item.Rate / 10 }}%
                                            </div>
                                        </div>
                                        <div class="cell">
                                            <div class="label">
                                                TRX{{ $t("layout.income") }}
                                            </div>
                                            <div class="value">
                                                {{ item.RewardTRX || 0 }}
                                                <!-- <span>TBK</span> -->
                                            </div>
                                        </div>
                                    </div>
                                    <div class="totalRow">
                                        <div class="cell">
                                            <div class="label">
                                                {{
                                                    $t("layout.Lockedposition")
                                                }}
                                            </div>
                                            <div class="value">
                                                {{ item.Amount }} TRX
                                            </div>
                                        </div>
                                        <div class="cell">
                                            <div class="label">
                                                TBK{{ $t("layout.income") }}
                                            </div>
                                            <div class="value">
                                                {{ item.RewardTBK || 0 }}
                                            </div>
                                        </div>
                                    </div>
                                    <div class="block">
                                        <div class="timeRow">
                                            <div class="timeRowB">
                                                <div class="time">
                                                    {{
                                                        $t(
                                                            "layout.Remainingmaturitytime"
                                                        )
                                                    }}
                                                    <span
                                                        >{{ timeEnd(item) }}
                                                        {{ $t("layout.Days") }}
                                                    </span>
                                                    {{
                                                        $t("layout.Unlockable")
                                                    }}
                                                </div>
                                            </div>
                                        </div>
                                        <van-progress
                                            :percentage="
                                                ((item.Duration -
                                                    timeEnd(item)) /
                                                    item.Duration) *
                                                100
                                            "
                                            stroke-width="9"
                                        />
                                        <div class="row">
                                            <div class="cell">
                                                <div class="label">
                                                    {{
                                                        $t("layout.Expiration")
                                                    }}
                                                </div>
                                                <div class="value">
                                                    {{ timeF2(item) }}
                                                </div>
                                            </div>
                                            <div class="cell">
                                                <div class="label">
                                                    {{
                                                        $t(
                                                            "layout.Subscriptiontime"
                                                        )
                                                    }}
                                                </div>
                                                <div class="value">
                                                    {{ item.StakeTime }}
                                                </div>
                                            </div>
                                        </div>
                                        <div class="renewalRow">
                                            <div class="nameRow">
                                                <div class="name">
                                                    <div
                                                        class="dc"
                                                        style="cursor: pointer"
                                                        @click="
                                                            clickUpdateStake(
                                                                item
                                                            )
                                                        "
                                                    >
                                                        <van-checkbox
                                                            v-model="
                                                                item.Renewal
                                                            "
                                                            shape="square"
                                                            icon-size="16px"
                                                            checked-color="rgba(235, 0, 41, 1)"
                                                            disabled
                                                        ></van-checkbox>
                                                        {{
                                                            $t(
                                                                "layout.Autorenewal"
                                                            )
                                                        }}
                                                    </div>
                                                    <van-popover
                                                        theme="light"
                                                        placement="top-start"
                                                        :offset="[-11, 10]"
                                                        overlay
                                                        teleport="#late-div"
                                                    >
                                                        <template #reference>
                                                            <svg
                                                                xmlns="http://www.w3.org/2000/svg"
                                                                width="16"
                                                                height="16"
                                                                viewBox="0 0 16 16"
                                                                fill="none"
                                                            >
                                                                <path
                                                                    d="M8 9.9248C8.48307 9.92486 8.87478 10.3168 8.875 10.7998C8.875 11.283 8.4832 11.6747 8 11.6748C7.51675 11.6748 7.125 11.2831 7.125 10.7998C7.12522 10.3167 7.51688 9.9248 8 9.9248ZM8 4.5C8.38639 4.50006 8.69993 4.81288 8.7002 5.19922V8.7002C8.7002 9.08676 8.38655 9.40033 8 9.40039C7.6134 9.40039 7.2998 9.08679 7.2998 8.7002V5.19922C7.30007 4.81284 7.61356 4.5 8 4.5Z"
                                                                    fill="#949494"
                                                                />
                                                                <path
                                                                    d="M8 1C4.13401 1 1 4.13401 1 8C1 11.866 4.13401 15 8 15C11.866 15 15 11.866 15 8C15 4.13401 11.866 1 8 1Z"
                                                                    stroke="#949494"
                                                                />
                                                            </svg>
                                                        </template>
                                                        <div
                                                            class="popoverText2"
                                                        >
                                                            {{
                                                                $t(
                                                                    "layout.text2"
                                                                )
                                                            }}
                                                        </div>
                                                    </van-popover>
                                                </div>
                                                <van-button
                                                    class="cancelautorenewal"
                                                    v-if="item.Renewal"
                                                    :loading="
                                                        item.updateLoading
                                                    "
                                                    @click="
                                                        sendUpdateStake(item)
                                                    "
                                                >
                                                    {{
                                                        $t(
                                                            "layout.Cancelautorenewal"
                                                        )
                                                    }}
                                                </van-button>
                                            </div>
                                            <div>
                                                <ul>
                                                    <li
                                                        v-for="(
                                                            ite, index
                                                        ) in stakeParameter"
                                                        :class="{
                                                            current:
                                                                ite.StakeDay ==
                                                                item.Renewal,
                                                            current2:
                                                                ite.StakeDay ==
                                                                item.renewal,
                                                        }"
                                                        @click="
                                                            (item.renewal =
                                                                ite.StakeDay),
                                                                sendUpdateStake2(
                                                                    item
                                                                )
                                                        "
                                                        :key="index"
                                                    >
                                                        {{ ite.StakeDay
                                                        }}{{
                                                            $t("layout.Days")
                                                        }}
                                                    </li>
                                                </ul>
                                                <!-- <div class="buttonRow">
                                                    <van-button
                                                        round
                                                        block
                                                        :disabled="
                                                            !item.Renewal
                                                        "
                                                        :loading="
                                                            item.updateLoading
                                                        "
                                                        @click="
                                                            sendUpdateStake(
                                                                item
                                                            )
                                                        "
                                                    >
                                                        {{
                                                            $t(
                                                                "layout.Cancelautorenewal"
                                                            )
                                                        }}
                                                    </van-button>
                                                    <van-button
                                                        round
                                                        block
                                                        type="primary"
                                                        :disabled="pageLoading"
                                                        @click="
                                                            sendUpdateStake2(
                                                                item
                                                            )
                                                        "
                                                    >
                                                        {{
                                                            $t("layout.Confirm")
                                                        }}
                                                    </van-button>
                                                </div> -->
                                            </div>
                                        </div>
                                        <van-button
                                            round
                                            block
                                            type="primary"
                                            :disabled="item.Status != 1"
                                            @click="sendSend(item)"
                                        >
                                            {{ $t("layout.Withdrawprincipal") }}
                                        </van-button>
                                    </div>
                                </div>
                            </van-list>
                        </van-pull-refresh>
                    </div>
                </van-tab>
                <van-tab :title="$t('layout.Receiverecord')">
                    <send-list ref="sendListRef" />
                </van-tab>
                <van-tab :title="$t('layout.MyCommunity')">
                    <send-list2 ref="sendListRef2" />
                </van-tab>
            </van-tabs>
        </div>
    </div>
    <van-popup
        v-model:show="open"
        :duration="0.2"
        close-icon-position="top-right"
        closeable
        round
        teleport="#app"
        :style="{
            background: `rgba(255, 255, 255, 1)`,
        }"
    >
        <div class="popup">
            <van-form @submit="onSubmit">
                <div class="title">
                    {{ $t("layout.Deposit") }} <span>TRX</span>
                </div>
                <div class="stakeDayRow">
                    <div class="label">
                        {{ $t("layout.Selectlockupperiod") }}
                    </div>
                    <ul>
                        <li
                            v-for="(item, index) in stakeParameter"
                            :class="{ on: item.StakeDay == stakeItem.StakeDay }"
                            @click="stakeItem = item"
                            :key="index"
                        >
                            {{ item.StakeDay }}{{ $t("layout.Days") }}
                        </li>
                    </ul>
                </div>
                <div class="rateRow">
                    <div class="label">
                        {{ $t("layout.Fixedannualizedrateofreturn") }}
                    </div>
                    <div class="value">{{ stakeItem.Rate / 10 }}%</div>
                </div>
                <div class="row row1">
                    <div class="label">{{ $t("layout.Accountbalance") }}</div>
                    <div class="value">{{ fromSun(balance) }} TRX</div>
                </div>
                <div class="row">
                    <div class="label">{{ $t("layout.Expirationtime") }}</div>
                    <div class="value">{{ timeF(stakeItem.StakeDay) }}</div>
                </div>
                <div class="fieldText">
                    {{ $t("layout.Pleaseenterquantity") }}
                    <span>
                        {{
                            `${$t("layout.QuantityIn")} ${
                                stakeItem.MinStake
                            } ~ ${stakeItem.MaxStake} ${$t("layout.between")}`
                        }}
                    </span>
                </div>
                <van-field
                    v-model="amount"
                    :placeholder="stakeItem.MinStake"
                    :rules="[
                        // {
                        //     required: true,
                        //     message: $t('layout.Pleaseenterquantity'),
                        // },
                        { validator: validatorMessage1 },
                    ]"
                >
                    <template #right-icon>
                        <div
                            class="all"
                            @click="
                                amount =
                                    fromSun(balance) > stakeItem.MaxStake
                                        ? stakeItem.MaxStake
                                        : fromSun(balance)
                            "
                        >
                            {{ $t("layout.Maximumvalue") }}
                        </div>
                    </template>
                </van-field>
                <div class="renewalRow">
                    <div class="nameRow">
                        <div class="name">
                            <van-checkbox
                                v-model="checked"
                                shape="square"
                                icon-size="16px"
                                checked-color="rgba(235, 0, 41, 1)"
                                @change="
                                    renewal = checked
                                        ? stakeParameter[0].StakeDay
                                        : 0
                                "
                            >
                                {{ $t("layout.AutoRenewal") }}
                            </van-checkbox>

                            <van-popover
                                theme="light"
                                placement="top-start"
                                :offset="[-16, 10]"
                                overlay
                                teleport="#late-div"
                            >
                                <template #reference>
                                    <svg
                                        xmlns="http://www.w3.org/2000/svg"
                                        width="16"
                                        height="16"
                                        viewBox="0 0 16 16"
                                        fill="none"
                                    >
                                        <path
                                            d="M8 9.9248C8.48307 9.92486 8.87478 10.3168 8.875 10.7998C8.875 11.283 8.4832 11.6747 8 11.6748C7.51675 11.6748 7.125 11.2831 7.125 10.7998C7.12522 10.3167 7.51688 9.9248 8 9.9248ZM8 4.5C8.38639 4.50006 8.69993 4.81288 8.7002 5.19922V8.7002C8.7002 9.08676 8.38655 9.40033 8 9.40039C7.6134 9.40039 7.2998 9.08679 7.2998 8.7002V5.19922C7.30007 4.81284 7.61356 4.5 8 4.5Z"
                                            fill="#949494"
                                        />
                                        <path
                                            d="M8 1C4.13401 1 1 4.13401 1 8C1 11.866 4.13401 15 8 15C11.866 15 15 11.866 15 8C15 4.13401 11.866 1 8 1Z"
                                            stroke="#949494"
                                        />
                                    </svg>
                                </template>
                                <div class="popoverText2">
                                    {{ $t("layout.text2") }}
                                </div>
                            </van-popover>
                        </div>
                    </div>
                    <ul v-if="checked">
                        <li
                            v-for="(item, index) in stakeParameter"
                            :class="{ current: item.StakeDay == renewal }"
                            @click="renewal = item.StakeDay"
                            :key="index"
                        >
                            {{ item.StakeDay }}{{ $t("layout.Days") }}
                        </li>
                    </ul>
                </div>
                <van-button
                    round
                    block
                    type="primary"
                    :loading="loading"
                    :disabled="pageLoading"
                    native-type="submit"
                >
                    {{ $t("layout.Deposit") }}
                </van-button>
            </van-form>
        </div>
    </van-popup>
    <referrer-2
        ref="referrer"
        @load="loading = false"
        @cross="loading = false"
    />
</template>

<style lang="less" scoped>
.page {
    padding: 180px 15px 15px 15px;
    .incomeInfo {
        .row {
            display: flex;
            justify-content: space-between;
            .cell {
                flex: 1;
                padding: 24px;
                border-radius: 20px;
                border: 1px solid #ffccd5;
                background: #fff7f7;

                &:nth-child(2) {
                    margin: 0 20px;
                }
                &:last-child {
                    &:hover {
                        border: 1px solid #eb0029;
                        box-shadow: 0px 0px 0px 2px rgba(235, 0, 41, 0.1);
                    }
                }
                .van-button {
                    width: auto;
                    height: auto;
                    padding: 9.5px 32px;
                    margin-top: 36px;
                }
            }
            .label {
                font-weight: 400;
                font-size: 16px;
            }
            .value {
                margin-top: 12px;
                font-size: 32px;
                font-weight: 600;
            }
        }
    }
    .van-tabs {
        margin-top: 80px;
        &:deep(.van-tabs__wrap) {
            margin-bottom: 20px;
            border-bottom: 1px solid #d9d9d9;
            .van-tabs__nav {
                padding: 0;
                height: 46px;
                background: transparent;

                .van-tab {
                    // padding: 0 30px 0 0;
                    width: 160px;
                    font-size: 16px;
                    color: #000;

                    &.van-tab--active {
                        color: #eb0029;
                        font-weight: 700;
                    }
                }
                .van-tabs__line {
                    // display: none;
                    bottom: 1px;
                    left: 0;
                    width: 160px;
                }
            }
        }
        .itemList {
            ul {
                display: flex;
                flex-wrap: wrap;
                gap: 19px;
                li {
                    position: relative;
                    width: 400px;
                    flex-shrink: 0;
                    padding: 24px;
                    border-radius: 10px;
                    border: 1px solid #d9d9d9;
                    box-sizing: border-box;
                    &:hover {
                        border-radius: 20px;
                        border: 1px solid #eb0029;
                        background: #fff7f7;
                        box-shadow: 0px 0px 0px 2px rgba(235, 0, 41, 0.1);
                    }
                    .title {
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                        line-height: 38px;
                        font-weight: 600;
                        font-size: 24px;
                        .right {
                            display: flex;
                            align-items: center;
                            color: #eb0029;
                            line-height: 1;
                            font-size: 16px;
                            font-weight: 400;
                            border-radius: 20px;
                            padding: 7px 16px;
                            border: 1px solid #eb0029;
                            background: #fff7f7;
                        }
                    }

                    .StakeDay {
                        font-size: 16px;
                    }
                    .cell {
                        margin-top: 20px;
                        font-size: 16px;
                        font-weight: 400;
                        .value {
                            margin-top: 8px;
                        }
                    }
                    .van-button {
                        margin-top: 24px;
                        height: 44px;
                    }
                }
            }
        }
        .stakeList {
            .van-list {
                display: flex;
                justify-content: space-between;
                flex-wrap: wrap;
            }
            &:deep(.van-list__finished-text) {
                flex: 100%;
                width: 100%;
                font-size: 18px;
            }
            &:deep(.van-list__loading) {
                flex: 100%;
                width: 100%;
            }
            &:deep(.van-loading) {
                .van-loading__text {
                    font-size: 18px;
                }
            }

            .stakeItem {
                flex: 49% 0 0;
                width: 49%;
                padding: 24px;
                margin-bottom: 20px;
                box-sizing: border-box;
                border-radius: 20px;
                border: 1px solid #d9d9d9;
                &:hover {
                    border-radius: 20px;
                    border: 1px solid #eb0029;
                    box-shadow: 0px 0px 0px 2px rgba(235, 0, 41, 0.1);
                }

                .title {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    line-height: 38px;
                    font-weight: 600;
                    font-size: 24px;
                    .right {
                        display: flex;
                        align-items: center;
                        color: #eb0029;
                        line-height: 1;
                        font-size: 16px;
                        font-weight: 400;
                        border-radius: 20px;
                        padding: 7px 16px;
                        border: 1px solid #eb0029;
                        background: #fff7f7;
                        box-shadow: 0px 0px 0px 2px rgba(235, 0, 41, 0.1);
                    }
                }
                .totalRow {
                    margin-top: 24px;
                    display: flex;
                    justify-content: space-between;
                    .cell {
                        margin-right: 20px;
                        .label {
                            font-weight: 400;
                            font-size: 16px;
                        }
                        .value {
                            margin-top: 15px;
                            font-weight: bold;
                            font-size: 23px;
                            color: #e93939;
                        }
                        &:last-child {
                            flex: 30% 0 0;
                            .value {
                                color: #000;
                            }
                        }
                    }
                }
                .timeRow {
                    margin-top: 34px;
                    .timeRowB {
                        display: flex;
                        justify-content: space-between;
                        font-weight: 400;
                        font-size: 16px;
                        span {
                            font-size: 24px;
                            font-weight: 600;
                            color: #eb0029;
                        }
                    }
                }
                .van-progress {
                    margin-top: 17px;
                    height: 12px !important;
                    background: #ffccd5;
                    border-radius: 20px;
                    &:deep(.van-progress__pivot) {
                        display: none;
                    }
                    &:deep(.van-progress__portion) {
                        background: #eb0029;
                        border-radius: 20px;
                    }
                }
                .row {
                    margin-top: 40px;
                    display: flex;
                    justify-content: space-between;
                    .cell {
                        margin-bottom: 20px;
                        .label {
                            font-weight: 400;
                            font-size: 16px;
                        }
                        .value {
                            margin-top: 8px;
                            color: #040404;
                            font-size: 20px;
                            font-weight: 400;
                            line-height: 160%; /* 32px */
                        }
                    }
                }
                .renewalRow {
                    margin-top: 20px;
                    margin-bottom: 28px;
                    .nameRow {
                        display: flex;
                        justify-content: space-between;
                        .van-checkbox {
                            margin-right: 3px;
                            &:deep(
                                    .van-checkbox__icon--disabled.van-checkbox__icon--checked
                                ) {
                                .van-icon {
                                    background-color: #eb0029;
                                    color: #fff;
                                    border: none;
                                }
                            }
                            &:deep(.van-icon) {
                                border-radius: 3px;
                                background: transparent;
                                cursor: pointer;
                            }
                        }
                        .name {
                            display: flex;
                            align-items: center;
                            font-weight: 400;
                            font-size: 16px;
                            svg {
                                margin-left: 4px;
                                width: 15px;
                                height: 15px;
                                cursor: pointer;
                            }
                        }
                    }
                    .icon3 {
                        width: 20px;
                        height: 20px;
                        cursor: pointer;
                        &.checked {
                            transform: rotateZ(180deg);
                        }
                    }
                    .cancelautorenewal {
                        border: none;
                        padding: 0;
                        color: #eb0029;
                        font-size: 16px;
                        font-weight: 400;
                        line-height: 120%; /* 19.2px */
                        height: auto;
                    }
                    .buttonRow {
                        margin-top: 16px;
                        display: flex;
                        justify-content: space-between;
                        .van-button {
                            width: 190px;
                            height: 45px;
                            font-weight: 500;
                            font-size: 18px;
                            border-radius: 8px;
                            &.van-button--default {
                                background: transparent;
                                border: 1px solid rgba(60, 113, 251, 1);
                            }
                        }
                    }
                    ul {
                        display: flex;
                        align-items: center;
                        justify-content: space-between;
                        flex-wrap: wrap;
                        margin-top: 13px;
                        li {
                            margin-right: 4px;
                            margin-bottom: 4px;
                            flex: 104px 0 0;
                            width: 104px;
                            height: 40px;
                            line-height: 40px;
                            text-align: center;
                            font-weight: 400;
                            font-size: 16px;
                            cursor: pointer;
                            border-radius: 10px;
                            border: 1px solid #d9d9d9;

                            &:last-child {
                                margin-right: 0;
                            }
                            &.current {
                                color: #fff;
                                border-radius: 10px;
                                background: #eb0029;
                                box-sizing: border-box;
                                opacity: 0.5;
                            }
                            &.current2 {
                                color: #fff;
                                border-radius: 10px;
                                background: #eb0029;
                                box-sizing: border-box;
                                opacity: 1;
                            }
                        }
                    }
                }
            }
        }
    }
    @media (max-width: 1000px) {
        & {
            padding: 98px 15px 15px 15px;
            .incomeInfo {
                .row {
                    position: relative;
                    flex-wrap: wrap;
                    .cell {
                        flex: 100% 0 0;
                        width: 100%;
                        box-sizing: border-box;
                        margin-bottom: 16px;
                        &:nth-child(2) {
                            margin: 0;
                            margin-bottom: 16px;
                        }
                        &:last-child {
                            margin-bottom: 0;
                        }
                        .van-button {
                            position: absolute;
                            padding: 9.5px 32px;
                            margin-top: 0;
                            bottom: 24px;
                            right: 24px;
                        }
                    }
                    .label {
                    }
                    .value {
                        font-size: 24px;
                    }
                }
            }
            .van-tabs {
                margin-top: 24px;
                &:deep(.van-tabs__wrap) {
                    .van-tabs__nav {
                        .van-tab {
                            flex: 1;
                            font-size: 16px;
                            letter-spacing: -0.3px;
                            width: auto;
                            white-space: nowrap;
                        }
                        .van-tabs__line {
                            width: 25%;
                        }
                    }
                }
                .itemList {
                    ul {
                        gap: 20px;
                        li {
                            width: 100%;
                            flex: 100%;
                        }
                    }
                }
                .stakeList {
                    .stakeItem {
                        flex: 100% 0 0;
                        width: 100%;
                        margin-bottom: 16px;
                        .title {
                            margin-bottom: 40px;
                        }
                        .totalRow {
                            .cell {
                                .value {
                                    font-size: 20px;
                                }
                            }
                        }
                        .timeRow {
                            .timeRowB {
                                span {
                                    font-size: 20px;
                                }
                            }
                        }
                        .renewalRow {
                            margin-top: 20px;
                            margin-bottom: 32px;

                            ul {
                                justify-content: flex-start;
                                gap: 8px;
                                li {
                                    margin-bottom: 0;
                                    margin-right: 0;
                                    height: auto;
                                    width: auto;
                                }
                            }
                        }
                        .row {
                            margin-top: 24px;
                            .cell {
                                .label {
                                    font-size: 16px;
                                }
                                .value {
                                    font-size: 16px;
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}
.popup {
    padding: 30px;
    box-sizing: border-box;
    overflow: hidden;
    .title {
        font-weight: 500;
        font-size: 22px;
    }

    .stakeDayRow {
        margin-top: 30px;
        .label {
            font-weight: 400;
            font-size: 16px;
        }
        ul {
            margin-top: 8px;
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            li {
                padding: 9px 16px;
                color: #000;
                font-size: 16px;
                border-radius: 10px;
                border: 1px solid #d9d9d9;
                cursor: pointer;
                &.on {
                    color: #fff;
                    background: #eb0029;
                    border: 1px solid #eb0029;
                }
            }
        }
    }
    .rateRow {
        margin-top: 20px;
        .label {
            margin-right: 12px;
            font-weight: 400;
            font-size: 16px;
        }
        .value {
            margin-top: 8px;
            color: #eb0029;
            font-size: 24px;
            font-weight: 600;
            line-height: 160%; /* 38.4px */
        }
    }
    .row {
        &.row1 {
            margin-top: 20px;
            margin-bottom: 20px;
        }
        .label {
            font-weight: 400;
            font-size: 16px;
        }
        .value {
            margin-top: 8px;
            font-size: 20px;
            font-weight: 600;
            line-height: 160%; /* 32px */
        }
    }
    .fieldText {
        margin-top: 20px;
        font-size: 16px;
        font-weight: 400;
        line-height: 120%; /* 19.2px */
        span {
            margin-left: 8px;
            color: #eb0029;
            font-size: 14px;
        }
    }
    .van-field {
        position: relative;
        margin-top: 8px;
        padding: 0;
        &::after {
            display: none;
        }
        &:deep(input) {
            padding: 0 15px;
            font-size: 16px;
            border-radius: 10px;
            height: 46px;
            border: 1px solid #d9d9d9;
            &::-webkit-input-placeholder {
                color: rgba(148, 148, 148, 1);
            }
            &:-moz-placeholder {
                color: rgba(148, 148, 148, 1);
            }
            &::-moz-placeholder {
                color: rgba(148, 148, 148, 1);
            }
            &:-ms-input-placeholder {
                color: rgba(148, 148, 148, 1);
            }
            &:focus {
                border: 1px solid #eb0029;
                background: #fff7f7;
            }
        }
        &:deep(.van-field__right-icon) {
            padding: 0;
        }
        .all {
            position: absolute;
            right: 15px;
            top: 0;
            line-height: 46px;
            color: #eb0029;
            font-size: 16px;
            font-weight: 400;
            cursor: pointer;
        }
    }
    .renewalRow {
        margin-top: 20px;
        .nameRow {
            display: flex;
            justify-content: space-between;
            .van-checkbox {
                display: flex;
                align-items: center;
                &:deep(
                        .van-checkbox__icon--disabled.van-checkbox__icon--checked
                    ) {
                    .van-icon {
                        background-color: #eb0029;
                        color: #fff;
                        border: none;
                    }
                }
                &:deep(.van-icon) {
                    border-radius: 3px;
                    background: transparent;
                }
                &:deep(.van-checkbox__label) {
                    line-height: 1;
                }
            }
            .name {
                display: flex;
                align-items: center;
                font-weight: 400;
                font-size: 16px;
                svg {
                    margin-left: 4px;
                    width: 15px;
                    height: 15px;
                    cursor: pointer;
                    display: block;
                }
            }
        }
        ul {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            margin-top: 8px;
            gap: 8px;
            li {
                padding: 9px 16px;
                color: #000;
                font-size: 16px;
                border-radius: 10px;
                border: 1px solid #d9d9d9;
                cursor: pointer;

                &.current {
                    color: #fff;
                    background: #eb0029;
                    border: 1px solid #eb0029;
                }
                &.current2 {
                    color: #fff;
                    background: #eb0029;
                    border: 1px solid #eb0029;
                }
            }
        }
    }
    .van-button {
        margin-top: 20px;
    }
    @media (max-width: 1000px) {
        & {
        }
    }
}
.popoverText2 {
    padding: 8px 15px;
    color: #000;
    font-family: "Noto Sans SC";
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 160%; /* 22.4px */
    max-width: 200px;
    word-wrap: break-word; /* 允许在长单词中间换行 */
    word-break: break-all; /* 允许任意位置的单词断开 */
}
</style>
